<script setup>

import api from "./api.js";
import tableCommon from "@/utils/tableCommon.js";
import RightToolbar from "@/components/RightToolbar/index.vue";


const tableData = ref([])
const tableRef = ref()

function getList() {
  api.list().then(response => {
    tableData.value = response;
  }).catch(error => {
    console.log(error);
  });
}

/** 导出按钮操作 */
function handleExport() {
  api.export().then(response => {
    tableCommon.exportExcel(response);
  }).catch((e) => {
    console.error(e);
  });

}

onMounted(()=> {
  getList();
})

</script>

<template>
  <div class="page-container">

    <div class="topbar-operate flexBetweenCenter">
      <div class="leftBox">
      </div>
      <right-toolbar @query-table="getList" @export-table="handleExport"></right-toolbar>
    </div>
    <div class="table">
      <vxe-table
          border="full"
          ref="tableRef"
          :column-config="{resizable: true}"
          :tree-config="{transform: true, rowField: 'id', parentField: 'parentId'}"
          :data="tableData">
        <vxe-column field="name" title="分类" tree-node></vxe-column>
        <vxe-column field="count" title="总数"></vxe-column>
        <vxe-column field="buyPrice" title="购置金额"></vxe-column>
      </vxe-table>
    </div>
  </div>

</template>

<style scoped lang="scss">

  .page-container {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }

  .topbar-search {
    background: #fff;
    padding: 10px 20px 10px;
  }

  .topbar-operate {
    .rightBox {
      display: flex;
      align-items: center;
    }
    padding: 10px;
  }

  .flexBetweenCenter {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>